<template>
  <div style="padding: 10px">
    <el-row :gutter="10">
      <el-col :span="24">
        <div style="height: 120px;">
          <div class="item1" style="text-align: center">
            <div>
              <span style="font-size: 30px;font-weight:bold;margin-bottom:10px;color: #E6A23C">{{ item.name }}</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
            <div style="margin: 10px 0 10px 0">
              称号：<span style="color: #222">{{item.code }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
              年龄：<span style="color: #222">{{item.age }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
              添加时间：<span style="color: #222">{{item.time }}</span>&nbsp;&nbsp;&nbsp;&nbsp;
            </div>
          </div>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="10">
      <div class="container" style="padding: 10px 0; border-bottom: 1px solid #ccc; color: #1E90FF; font-size: 20px;">
        <div style="color: orangered; font-size: 20px;font-weight: bold;">
          主要事迹
        </div>
        <el-button size="mini" plain type="primary" @click="goBack">返回</el-button>
      </div>
      <el-col :span="24">
        <div style="margin-top: 10px">
          <div style="margin-top: 15px" v-html="item.content"></div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "Detail",
  data() {
    return {
      id: this.$route.query.id,
      item: {},
      user: localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")) : {},
      state: true,
    }
  },
  created() {
    this.load()
  },
  methods: {
    goBack() {
      this.$router.go(-1) // 返回上一页，相当于浏览器后退按钮
    },
    load() {
      this.$request.get("/poet/" + this.id).then(res => {
        this.item = res.data
      })
    },
  }
}
</script>

<style scoped>
.item1 {
  padding: 10px;
  color: #666;
}
.collect-like {
  display: inline-block; /* 或者 flex */
  margin-left: 250px; /* 根据需要调整 */
}

.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ccc;
  padding-bottom: 10px;
}
</style>

